<template>
  <div class="app-container">
    <!--                                导入之后                         导入之前      -->
    <upload-excel-component :on-success="handleSuccess" :before-upload="beforeUpload" />
    <el-table :data="tableData" border highlight-current-row style="width: 100%;margin-top:20px;">
      <el-table-column v-for="item of tableHeader" :key="item" :prop="item" :label="item" />
    </el-table>
  </div>
</template>

<script>
import UploadExcelComponent from '@/components/UploadExcel/index.vue'
// 导入接口 - 批量导入员工
import { batchUploadUserRequest } from '@/api/employees'
// 导入 中文转英文的函数
import { transformZhCNToEn } from '@/utils/index'
// 导入 英文转中文的函数
import { transformEnToZhCN } from '@/utils/index'

export default {
  name: 'UploadExcel',
  components: { UploadExcelComponent },
  data() {
    return {
      tableData: [],
      tableHeader: []
    }
  },
  methods: {
    // 导入之前
    beforeUpload(file) {
      const isLt1M = file.size / 1024 / 1024 < 1

      if (isLt1M) {
        return true
      }

      this.$message({
        message: 'Please do not upload files larger than 1m in size.',
        type: 'warning'
      })
      return false
    },
    // 导入之后
    async handleSuccess({ results, header }) {
      this.tableData = results // 用于当前页面预览
      this.tableHeader = header // 用于当前页面预览
      const enList = transformZhCNToEn(results)
      this.batchUploadUserRequest(enList)
    },
    // 请求 - 批量导入员工列表
    async batchUploadUserRequest(enList) {
      try {
        const res = await batchUploadUserRequest(enList)
        if (res.success) {
          this.$message.success('批量上传员工列表成功!')
        } else {
          this.$message.error()
        }
      } catch (error) {
        console.log('批量导入员工列表失败', error)
      }
    },
    // 导出 excel 的方法
    // 需要下包:  npm install file-saver script-loader
    exportExcel() {
      import('@/vendor/Export2Excel').then(excel => {
        // 将英文数据带入转换函数, 转换为中文数据
        const { header, data } = transformEnToZhCN(this.rableData)
        excel.export_json_to_excel({
          // 表头
          // header: ['姓名', '年龄', '住址'], // 表头
          // 表格数据, 是一个二维数组
          // data: [
          //   ['刘备', 500, '蜀国'],
          //   ['刘备1', 501, '蜀国1'],
          //   ['刘备2', 502, '蜀国2'],
          //   ['刘备3', 503, '蜀国3']
          // ],
          header,
          data,
          filename: '', // 导出文件的名称
          autoWidth: true, //
          bookType: 'xlsx'
        })
        this.downloadLoading = false
      })
    }

  }
}
</script>
